<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../css/reset.css">
		<style>
			.w {
				width: 1226px;
				margin: 0 auto;
			}

			.goodsList li {
				width: 230px;
				float: left;
				padding: 5px;
				box-sizing: border-box;
				border: 1px solid #333;
				margin-left: 10px;
				margin-bottom: 10px;
			}

			.goodsList li img {
				width: 80%;
				display: block;
				margin: 0 auto;
			}

			.title {
				font-size: 14px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.price {
				line-height: 32px;
				font-size: 14px;
				color: #e33333;
			}
		</style>
	</head>

	<body>
		<!-- ul.goodsList>li>a>img+.title+.price -->
		<ul class="goodsList w cl">
			<!-- <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
                <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
                <div class="price">￥ 3199.00 </div>
            </a>
        </li> -->
		</ul>
	</body>
	<script>
		// 京东商品列表接口   

		// https://floor.jd.com/user-v20/feed/get?page=2&pagesize=25&area=17_2980_0_0&source=pc-home&callback=jsonpMore2Goods&_=1631781864760
		// 参数:
		// page: 页码
		// pagesize: 页面多少条
		// callback: 自定义接口返回的回调函数名
		
		// 数据
		// var result = {
		// 	success:true,
		// 	data: [{
		// 		target_url: 跳转地址,
		// 		t:商品描述,
		// 		op: 现价,
		// 		jp: 原价,
		// 		img:"https://img10.360buyimg.com/jdcms/s300x300_" + img
		// 	}, {

		// 	}],

		// }

		var ul = document.getElementsByClassName("goodsList")[0];
		
		
		function fn(result){
			console.log(result);
			var {data:list} = result;
			
 			var html = "";
			list.forEach(function(item){
				console.log(item);
				var {target_url,op,jp,img,t} = item;
				html+=`<li>
						<a href="https://${target_url}">
							<img src="https://img10.360buyimg.com/jdcms/s300x300_${img}" alt="">
							<div class="title">${t}</div>
							<div class="price">￥ ${op} </div>
						</a>
				</li>`;
			})
			ul.innerHTML = html;
		}
		
		
		
		
	</script>
	
	<!-- fn({}) -->
	<script type="text/javascript" src="https://floor.jd.com/user-v20/feed/get?page=1&pagesize=100&area=17_2980_0_0&source=pc-home&callback=fn&_=1631781864760"></script>

</html>
